<template>
  <div class="searchResult">
    <!-- <van-nav-bar title="搜索结果" class="navbar">
      <template #left>
        <van-icon name="arrow-left" class="myicon" />
      </template>
    </van-nav-bar> -->
    <div class="nav">
      <hmttNav title="搜索结果" path="/search" class="navbar"></hmttNav>
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="articles" v-for="(item, index) in searchList" :key="index">
        <div class="title" @click="todetail(item.title)">
          {{ item.title }}
        </div>
        <div class="info">
          <div class="user">{{ item.aut_name }}</div>
          <div class="comment">{{ item.comm_count }}评论</div>
          <div class="time">{{ item.pubdate | hmfilter }}</div>
        </div>
        <div class="bottom">
          <div class="commentNum" @click="todetail">
            <i class="iconfont icon-pinglun"></i>{{ item.comm_count }}
          </div>
          <div v-if="isStar">
            <div
              class="star"
              @click="getStar(item)"
              v-if="item.like_count === 0"
            >
              <i class="iconfont icon-dianzan2"></i>点赞
            </div>
            <div class="star active" @click="getStar(item)" v-else>
              <i class="iconfont icon-dianzan2" style="color:red;"></i
              >{{ item.like_count }}
            </div>
          </div>
          <!-- <div class="star active" @click="getStar(item)" v-else>
            <i class="iconfont icon-dianzan"></i>{{ item.like_count }}
          </div> -->
          <div class="share" @click="todetail">
            <i class="iconfont icon-icon-test"></i>分享
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import hmttNav from '../../../components/index.vue'
import { getSearchApi } from '@/Api/search.js'
import { starApi, disStarApi } from '@/Api/detail.js'
// , articleDetailApi
export default {
  components: { hmttNav },
  data () {
    return {
      loading: false,
      finished: false,
      // 搜索结果
      articleId: '',
      searchList: [],
      total_count: 0,
      page: 0,
      per_page: 10,
      isStar: true,
      likeCount: 0,
      attitude: '',
      articleObj: {},
      count: 0
    }
  },
  methods: {
    async getStar (item) {
      var artId = item.art_id
      // console.log(item.like_count)
      // console.log(artId)
      const res = await starApi({
        target: artId
      })
      // console.log(res)
      console.log(this.searchList)
      if (res.status === 201) {
        // 获取文章详情信息
        // const detail = await articleDetailApi({
        //   id: artId,
        //   article_id: artId
        // })
        // console.log(detail)
        // this.articleObj = detail.data.data
        // this.attitude = res.data.data.attitude
        if (item.like_count === 0) {
          item.like_count++
          this.$toast.success('点赞成功')
        } else {
          item.like_count--
          await disStarApi(artId)
          this.$toast.success('已取消')
        }
        this.isStar = false
        this.$nextTick(() => {
          this.isStar = true
        })
      }
    },
    todetail (value) {
      var artId
      this.searchList.forEach(item => {
        if (item.title === value) {
          artId = item.art_id
        }
      })
      this.$router.push(`/detail/${artId}`)
    },
    async onLoad () {
      // 调用接口获得搜索数据
      this.page += 1
      this.per_page += 10
      const value = this.$route.params.key
      // console.log(this.$route)
      // 调用接口获得搜索数据
      const res = await getSearchApi({
        page: this.page,
        per_page: this.per_page,
        q: value
      })
      console.log(res)
      console.log(res.data.data)
      this.searchList.push(...res.data.data.results)
      this.total_count = res.data.data.total_count
      this.loading = false
      // 数据加载完毕执行finished
      if (this.searchList.length >= this.total_count) {
        this.finished = true
      }
    }
  }
}
</script>

<style lang="less" scoped>
// .navbar {
//   background-color: #3296fa;
//   .myicon {
//     font-size: 30px;
//     color: #fff;
//   }
//   ::v-deep .van-nav-bar__left {
//     padding-left: 8px;
//   }
//   ::v-deep .van-nav-bar__title.van-ellipsis {
//     color: #fff;
//     font-size: 16px;
//     font-weight: 600;
//   }
// }
.searchResult {
  padding-top: 50px;
  .nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    margin-bottom: 50px;
  }
  .articles {
    padding: 15px;
    border-bottom: 1px solid #d8d8d8;
    .title {
      font-size: 18px;
      color: #333333;
      margin-bottom: 20px;
    }
    .info {
      font-size: 10px;
      color: #949494;
      display: flex;
      margin-bottom: 10px;
      line-height: 10px;
      .user {
        margin-right: 15px;
      }
      .comment {
        margin-right: 15px;
      }
      .time {
        margin-right: 15px;
      }
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      font-size: 16px;
      vertical-align: middle;
      .commentNum,
      .star,
      .share {
        .iconfont {
          color: #949494;
          font-size: 25px;
          padding-right: 10px;
        }
      }
    }
  }
  .active {
    color: red;
  }
}
</style>
